@extends('layouts.mobile_main')

@section('title', $title)

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}/css/public.css?v={{env('CSS_VERSION')}}">
    <link rel="stylesheet" href="{{env('CSS_DOMAIN')}}/css/passwordkeyboard.css?v={{env('CSS_VERSION')}}" type="text/css" />
    <link rel="stylesheet" href="{{env('CSS_DOMAIN')}}/css/check.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
@endsection

@section('content')
<header class="pay_sure oh" style="background-color: #fff;">
    <a class="fl" href="javascript:history.go(-1);">
        <img class="fl" src="{{env('IMAGE_DOMAIN')}}/images/back_p.png?v={{env('IMAGE_VERSION')}}" alt="">
    </a>
    <span class="fl co_violet fz_48 setpass" style="margin-left: 2.9rem;">{{$title}}</span>
</header>
<div style="text-align: center;padding-top: 10px;">
    <span id="set_text" style="font-size: large;"></span>
</div>

<div style="padding-top: 20px;text-align: center;">
    <form id="password" >
        <input readonly class="pass" type="password"maxlength="1"value="">
        <input readonly class="pass" type="password"maxlength="1"value="">
        <input readonly class="pass" type="password"maxlength="1"value="">
        <input readonly class="pass" type="password"maxlength="1"value="">
        <input readonly class="pass" type="password"maxlength="1"value="">
        <input readonly class="pass pass_right" type="password"maxlength="1" value="">
    </form>
</div>
<p class="fz_40 tc co_violet setpass" style="margin-top: 2.6rem;">{{$message}}</p>
@if(isset($oldpaypassword))
    <input type="hidden" name="old_pay_password" value="{{$oldpaypassword}}" />
@else
    <input type="hidden" name="old_pay_password" value="" />
@endif
@if(isset($realname))
    <input type="hidden" name="real_name" value="{{$realname}}" />
@else
    <input type="hidden" name="real_name" value="" />
@endif

@if(isset($identitycard))
    <input type="hidden" name="identity_card" value="{{$identitycard}}" />
@else
    <input type="hidden" name="identity_card" value="" />
@endif
<div id="keyboardDIV"></div>

@endsection
@section('scriptResources')
    @parent
    <script type="text/javascript">
    $(function(){
        var check_pass_word = '';
        var passwords = $('#password').get(0);
        $(function(){
            var div = '\
            <div id="key" style="position:absolute;background-color:#A8A8A8;width:99.5%;bottom:0px;">\
                <ul id="keyboard" style="font-size:20px;margin:2px -2px 1px 2px">\
                    <li class="symbol"><span class="off">1</span></li>\
                    <li class="symbol"><span class="off">2</span></li>\
                    <li class="symbol btn_number_"><span class="off">3</span></li>\
                    <li class="tab"><span class="off">4</span></li>\
                    <li class="symbol"><span class="off">5</span></li>\
                    <li class="symbol btn_number_"><span class="off">6</span></li>\
                    <li class="tab"><span class="off">7</span></li>\
                    <li class="symbol"><span class="off">8</span></li>\
                    <li class="symbol btn_number_"><span class="off">9</span></li>\
                    <li class="delete lastitem">删除</li>\
                    <li class="symbol"><span class="off">0</span></li>\
                    <li class="cancle btn_number_">取消</li>\
                </ul>\
            </div>\
            ';
            var character,index=0;  $("input.pass").attr("disabled",true);  $("#password").attr("disabled",true); $("#keyboardDIV").html(div);
            $('#keyboard li').click(function(){
                if ($(this).hasClass('delete')) {
                    $(passwords.elements[--index%6]).val('');
                    if($(passwords.elements[0]).val()==''){
                        index = 0;
                    }
                    return false;
                }
                $(this).animate({
                    top: "1px",
                    left: "1px"
                },100,function(){
                    $(this).animate({
                    top: "0",
                    left: "0"
                },100)})

                if ($(this).hasClass('symbol') || $(this).hasClass('tab')){
                    character = $(this).text();
                    $(passwords.elements[index++%6]).val(character);
                    if($(passwords.elements[5]).val()!=''){
                        index = 0;
                    }
                    if($(passwords.elements[5]).val()!='') {
                        var temp_rePass_word = '';
                        var action_type= "{{$type}}";
                        for (var i = 0; i < passwords.elements.length; i++) {
                            temp_rePass_word += $(passwords.elements[i]).val();
                        }
                        check_pass_word = temp_rePass_word;
                        $("#key").hide();
                        if(action_type == 'update_new') {
                            var old_pay_password = $("input[name='old_pay_password']").val();
                            var post_data = {
                                'paypassword':check_pass_word,
                                'type':action_type,
                                'oldpaypassword': old_pay_password
                            };
                        } else if(action_type == 'identity_pass'){
                            var real_name = $("input[name='real_name']").val();
                            var identity_card = $("input[name='identity_card']").val();
                            var post_data = {
                                'paypassword':check_pass_word,
                                'type':action_type,
                                'realname': real_name,
                                'identitycard':identity_card
                            };
                        } else {
                            var post_data = {
                                'paypassword':check_pass_word,
                                'type':action_type
                            };
                        }

                        $.ajax({
                              url :"/mobile/mycenter/password/verify" ,
                              type:'post',
                              data: post_data,
                              dataType:'json',
                              success:function(data){
                                    if(data.status == 'success') {
                                        if((action_type == 'add') || (action_type=='delete') || (action_type == 'update_new') || (action_type == 'identity_pass')) {
                                            window.location.href = '/mobile/mycenter/password/index';
                                        } else if (action_type == 'update_old') {
                                            window.location.href = '/mobile/mycenter/password/set?type=update_new&oldpaypassword='+check_pass_word;
                                        }
                                    } else {
                                        alert(data.message);
                                        location.reload();
                                    }
                              }
                        });
                    }
                }
                return false;
            });
            var pass=true;//控制创建密码还是确认密码
            if(pass){
                $(".setpass").show();
                $(".sureagain").hide();
            }else{
                $(".setpass").hide();
                $(".sureagain").show();
            }
        });
    })
    </script>
@endsection
